<template>
  <c-card isAffix>
    <c-table
      row-key="id"
      class="table-template__table"
      :loading="loading"
      :data="tableData"
      v-model:search="searchParams"
      v-model:paging="paging"
      @refresh="queryTableData"
    >
      <!-- 搜索栏 -->
      <template #search>
        <c-select
          width="200px"
          v-model="searchParams.uni_platform"
          prefixText="平台："
          :optionList="UserPlatform"
        ></c-select>
        <c-input v-model="searchParams.userid" placeholder="请输入userid" />
      </template>

      <!-- 表格 -->
      <template #table>
        <el-table-column prop="_id" label="userId" />
        <el-table-column prop="avatar" label="用户信息" width="260">
          <template #default="{ row }">
            <div class="userinfo">
              <img class="userinfo-img" v-if="row.avatar" :src="row.avatar" alt="" />
              <div class="userinfo-right">
                <div class="userinfo-item">账号：{{ row.username || '-' }}</div>
                <div class="userinfo-item">名称：{{ row.nickname || '-' }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="管理员" />
        <el-table-column prop="last_login_ip" label="最后一次登录ip" />

        <el-table-column prop="uni_platform" label="平台">
          <template #default="{ row }">
            {{ row.register_env.uni_platform }}
          </template>
        </el-table-column>

        <el-table-column prop="score" label="积分">
          <template #default="{ row }">
            <span :class="[row.type == 1 && 'is-success-text', row.type == 2 && 'is-error-text']">
              {{ row.score }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="register_date" label="注册时间">
          <template #default="{ row }">
            {{ dayjs(row.register_date).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
      </template>
    </c-table>
  </c-card>
</template>

<script setup name="el-encap.table-template">
import { ref, computed, onMounted } from 'vue';

// hooks
import { useTable } from '@/hooks/useTable/index.js';
import { useFetch } from '@/hooks/useFetch/index.js';

// components
import { MessageBox } from '@/utils/message-box';
import { ElMessage } from 'element-plus';

// router
import { useRouter } from 'vue-router';
const router = useRouter();

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

// user
import { useUserStore } from '@/pinia/modules/user.js';
const userStore = useUserStore();

import { pageListUser } from '@/apis/user';

import { UserPlatform } from '@/config/global-variable';

import dayjs from 'dayjs';

// 表格相关
const { loading, paging, searchParams, tableData, queryTableData, delTableRow } = useTable({
  api: pageListUser,
  params: {
    uni_platform: '',
    userid: '',
  },
  options: {},
  callBack: () => {},
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
.userinfo {
  display: flex;
  align-items: center;

  &-img {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    margin-right: 10px;
  }

  .userinfo-right {
    flex: 1;
    font-size: 12px;
  }
}
</style>
